import { MailOutlined, PhoneOutlined, LockOutlined, UserOutlined } from '@ant-design/icons';
import { Form, Button, Input, Tabs, message } from 'antd';
import './ZTlogin.css';
import api from '../../api/index';
import { useState } from 'react';
import { request } from 'http';
type RegisterType = 'email' | 'phone';

const Register = () => {
    const [messageApi, contextHolder] = message.useMessage();

    const onFinish = async (values: any) => {
        try {
            await api.post('/register', {
                phone: values.phone,
                username: values.username,
                password: values.password,
                email: values.email 
            }).then(res => {
                messageApi.open({
                    content: res.data.message
                }).then(() => {
                    if (res.data.message == '注册成功') {
                        window.location.href = '/login/account';
                    }
                })
            })

            // 跳转到登录页面
            
        } catch (error: any) {
            console.log(1);
            

        }
    };

    return (
        <div style={{ width: '80%', margin: 'auto' }}>
            {contextHolder}
            <Form
                className="login-form"
                onFinish={onFinish}
            >
                <Form.Item
                    name="phone"
                    rules={[
                        { required: true, message: '请输入手机号' },
                        {
                            pattern: /^1[3-9]\d{9}$/,
                            message: '手机号格式不正确'
                        }
                    ]}
                >
                    <Input
                        prefix={<PhoneOutlined />}
                        placeholder="请输入手机号"
                    />
                </Form.Item>

                <Form.Item
                    name="username"
                    rules={[
                        { required: true, message: '用户名不能为空' },
                        { min: 3, message: '用户名至少3个字符' },
                        { pattern: /^[a-zA-Z0-9_]+$/, message: '只能包含字母、数字和下划线' }
                    ]}
                >
                    <Input
                        prefix={<UserOutlined />}
                        placeholder="请输入用户名"
                    />
                </Form.Item>

                <Form.Item
                    name="password"
                    rules={[
                        { required: true, message: '密码不能为空' },
                    ]}
                >
                    <Input.Password
                        prefix={<LockOutlined />}
                        placeholder="请输入密码"
                    />
                </Form.Item>

                <Form.Item
                    name="email"
                    rules={[
                        { type: 'email', message: '邮箱格式不正确' },
                        { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '请输入有效的邮箱地址' }
                    ]}
                >
                    <Input
                        prefix={<MailOutlined />}
                        placeholder="选填邮箱（用于密码找回）"
                    />
                </Form.Item>
                <Button
                    type="primary"
                    htmlType="submit"
                    className="login-form-button"
                    style={{ marginTop: 24 }}
                >
                    立即注册
                </Button>

                <div style={{ textAlign: 'center' }}>
                    已有账号？<a href="/login/account">立即登录</a>
                </div>
            </Form>
        </div>
    );
}

export default Register;